<template>
  <div class="app-container">
    <el-drawer
      :title="title"
      :visible.sync="openDetail"
      size="80%"
      @close="cancel"
      :append-to-body="true"
    >
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <div style="padding: 0 20px">
        <el-table v-loading="loading" :data="itemrecptlineList">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="序号" align="center" width="50px" prop="issueCode">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" width="120px" prop="itemCode" />
          <el-table-column label="产品名称" align="center" prop="itemName" />
          <el-table-column label="规格型号" align="center" prop="specification" />
          <el-table-column label="SN码（序列号）" align="center" prop="snCode" />
          <el-table-column label="批次号" align="center" prop="batchCode" />
          <el-table-column label="仓库" align="center" prop="warehouseName" />
          <!-- <el-table-column label="库区名称" align="center" prop="locationName" />
          <el-table-column label="库位名称" align="center" prop="areaName" /> -->
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
  </div>
</template>
    
<script>
import { listProductsalseLine } from "@/api/mes/wm/productsalse";
import Productsalseline from "./line.vue";
export default {
  data() {
    return {
      openDetail: false,
      title: "查看出库产品详情",
      warehouseInfo: [],
      // 表单参数
      form: {},
      loading: false,
      itemrecptlineList: [],
      issueId: null,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        lineId: null
      }
    };
  },
  components: { Productsalseline },
  dicts: ["mes_order_status"],
  methods: {
    //初始化函数
    init(row) {
      console.log(row, "子组件的row");
      this.form = row;
      this.openDetail = true;
      this.queryParams.lineId = row.lineId;
      this.getList();
    },
    getList() {
      this.loading = true;
      listProductsalseLine(this.queryParams).then(response => {
        this.itemrecptlineList = response.rows || [];
        this.loading = false;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        salseId: null,
        salseCode: null,
        salseName: null,
        oqcId: null,
        oqcCode: null,
        soCode: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        clientNick: null,
        warehouseId: null,
        warehouseCode: null,
        warehouseName: null,
        locationId: null,
        locationCode: null,
        locationName: null,
        areaId: null,
        areaCode: null,
        areaName: null,
        salseDate: new Date(),
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.bg-purple {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 30px;
  }
}
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
</style>
    